<template>
  <view class="demo">
    <l-painter
      isCanvasToTempFilePath
      @success="path = $event"
      css="width: 750rpx;"
      hidden
    >
      <l-painter-image
        src="/static/images/1.jpg"
        css="width: 750rpx; height: 1750rpx;"
      />
      <l-painter-qrcode
        :text="text"
        css="width: 180rpx; height: 180rpx;position: absolute;top: 1250rpx;background-color: #fff;box-sizing: border-box;padding: 10rpx;border-radius: 10rpx;right: 93rpx;z-index: 50;"
      />

      <l-painter-view
        css="position: absolute;top: 1310rpx; right: 575rpx;z-index: 50;"
      >
        <l-painter-text
          :text="user.userId"
          css=" color: #222222;font-size: 50rpx;right: 94rpx;z-index: 50;"
        />
      </l-painter-view>
    </l-painter>

    <view> <image :src="path" mode="widthFix" class="img"></image></view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      path: "",
    };
  },
  async onLoad() {},
  computed: {
    user() {
      return this.$store.state.user.user;
    },

    text() {
      return `http://43.138.186.106:85/#/pages/register?userId=${this.user?.userId}`;
    },
  },
  methods: {},
};
</script>

<style lang="scss">
.demo {
  position: relative;
}

.img {
  width: 100%;
  //   position: absolute;
  //   top: 300rpx;
  //   background-color: #fff;
  //   box-sizing: border-box;
  //   padding: 10rpx;
  //   border-radius: 10rpx;
  //   right: 100rpx;
  //   z-index: 50;
}
</style>
